<template>
	<view class="page">
		<topVue :title="i18n.n1"></topVue>
		<view class="banner margin30">
			<image src="../../static/banner.png" mode="widthFix" class="w100"></image>
		</view>

		<view class="titleVue flex align-center">
			<view class="dot"></view>
			<view class="title">Cat</view>
		</view>

		<view class="destoryVue margin30 flex-column flex-between">
			<view class="label">{{i18n.i1}}</view>
			<view class="value">{{ totalDestoryNum }}</view>
		</view>

		<view class="showVue margin60">
			<image src="../../static/show.png" mode="widthFix"></image>
		</view>

		<view class="titleVue flex align-center">
			<view class="dot"></view>
			<view class="title">收益播报</view>
		</view>
		<view class="tableVue margin30">
			<view class="thVue flex">
				<view class="li">用户</view>
				<view class="li">成交价</view>
				<view class="li">成交量</view>
			</view>
			<view class="tdVue flex" v-for="(item, index) in list" :key="index">
				<view class="li">{{item.userName | addressFilter()}}</view>
				<view class="li">{{item.price}}</view>
				<view class="li">{{item.catAmount | number(4)}}</view>
			</view>
		</view>

		<view class="titleVue flex align-center">
			<view class="dot"></view>
			<view class="title">要求</view>
		</view>

		<view class="content">AICAT是MEME2.0的代表</view>

		<view class="titleVue flex align-center">
			<view class="dot"></view>
			<view class="title">权益</view>
		</view>

		<view class="rightVue margin30">
			<view class="right">
				<view class="label">1.节点精灵猫招募分红</view>
				<view class="text">AICAT用于公会骑士团分红，其中40%用于公会骑士团成员平分，另外的60%则根据骑士个人军团功绩在总功绩中的权重进行加权分配。</view>
				<view class="info">功绩:个人军团招募节点精灵猫贡献总值</view>
			</view>
			<view class="right margin30">
				<view class="label">2.会员会费分红</view>
				<view class="text">AICAT士团分红，其中40%用于公会骑士团成员平分，另外的60%则根据骑士个人军团功绩在总功绩中的权重进行加权分配。</view>
				<view class="info">功绩:个人军团AI托管量</view>
			</view>
			<view class="right margin30">
				<view class="label">3.推广奖励</view>
				<view class="text">骑士团成员个人直接推广节点精灵猫获得40%奖励</view>
			</view>
			<view class="right margin30">
				<view class="label">4.终身等级</view>
				<view class="text">奖励给骑士团成员终身公会VIP4等级</view>
			</view>
		</view>

		<image src="../../static/friend.png" mode="widthFix" style="width: 100%;"></image>

		<u-popup v-model="isBand" mode="center">
			<view class="langVue flex-between flex-column">
				<view class="lang flex-between flex-column align-center">
					<view class="title text-center">绑定上级地址</view>
					<input v-model="link"/>
					<view class="btn" @click="bandFun()">
						<image src="../../static/confirm.png" style="width: 100%; height: 100%;"></image>
					</view>
				</view>
				<view class="closeVue flex-center align-center" @click="isBand=false">
					<image src="../../static/close.png" style="width: 58rpx; height: 58rpx;"></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isBand: false,
				link: "",
				totalDestoryNum: 0,
				list: [],
				timer: null,
			}
		},
		async onShow() {
			await this.getBurnAmount()
			await this.getInfo()
			this.timer = setInterval(()=>{
				this.getInfo()
			}, 5000)
		},
		
		onHide() {
			console.log("kkkkkkkkkkkkkkkkkkkkkkkkk")
			clearInterval(this.timer)
			this.timer = null
		},
		

		computed:{
			i18n() {
				return this.$t("message");
			}
		},

		watch: {
			"$store.state.random"(){
				this.getUserInfo()
			}
		},

		methods: {
			async getInfo(){
				const result = await this.$request("/front/search/mintRecord", {})
				if(result.code===0) {
					console.log(result)
					this.list = result.data
				}
				
			},
			
			async getBurnAmount(){
				const result = await this.$request("/front/search/getBurnAmount", {})
				if(result.code===0) {
					this.totalDestoryNum = result.data
				}
			},

			async getUserInfo(){
				const result = await this.$request("/front/user/userInfo", {})
				console.log(result)
				if(result.code===0) {
					console.log("kkkk")
					if(!result.data.parentAddress) {
						let link = window.location.href
            let sp = link.split('?');
						let herf = sp[sp.length - 1];
						let params = new URLSearchParams(herf)
						this.link = params.get('address')
						console.log(this.link, "链接带了邀请码")
						if(this.link) {
							this.$request("/front/user/bindLeader", {
								address: this.link
							}).then(res=>{
								this.getUserInfo()
							})
						}else{
							this.isBand = true
						}
					}
				}
			},

			async bandFun(){
				if(!this.link) return this.$u.toast("请输入邀请码")
				const res = await this.$request("/front/user/bindLeader", {
					address: this.link
				})
				if(res.code===0) {
					this.$u.toast("绑定成功")
					this.isBand = false
				}else{
					this.$u.toast(res.msg)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/.u-mode-center-box {
		background-color: transparent !important;
	}
	/deep/.u-drawer-left {
		background-color: transparent !important;
	}
	.banner {
		width: 670rpx;
		height: 354rpx;
	}
	.langVue {
		width: 670rpx;
		height: 682rpx;
		padding: 52rpx 0 80rpx;
		box-sizing: border-box;
		.lang {
			width: 670rpx;
			height: 402rpx;
			background: url("../../static/lang_kuang.png") no-repeat;
			background-size: 100% 100%;
			padding: 60rpx 0 90rpx;
			.title {
				font-size: 32rpx;
				font-weight: 600;
			}
			input {
				width: 540rpx;
				height: 80rpx;
				background: #06100B;
				border-radius: 8rpx;
				border: 1rpx solid #4C5B51;
				display: block;
				box-sizing: border-box;
				text-align: center;
				color: #45F882;
			}
			.btn {
				width: 260rpx;
				height: 62rpx;
				background: transparent;
			}
		}


		.closeVue {
			width: 100%;
			height: 100rpx;
		}
	}

	.titleVue {
		width: 100%;
		padding: 40rpx 0 0 40rpx;
		.dot {
			width: 4rpx;
			height: 30rpx;
			background: #45F882;
		}
		.title {
			font-weight: 600;
			padding-left: 20rpx;
			line-height: 1;
			font-size: 32rpx;
		}
	}

	.destoryVue {
		width: 670rpx;
		height: 204rpx;
		background: url("../../static/destoryVue.png") no-repeat;
		background-size: 100% 100%;
		padding: 50rpx 35rpx;
		.label {
			color: rgba(255,255,255,0.4);
			line-height: 1;
			font-size: 32rpx;
		}
		.value {
			line-height: 1;
			font-weight: 600;
			font-size: 40rpx;
		}
	}

	.showVue {
		width: 100%;
	}

	.tableVue {
		width: 670rpx;
		.thVue {
			width: 100%;
			height: 56rpx;
			background: #6AF28D;
			.li {
				width: 33.333333%;
				line-height: 56rpx;
				text-align: center;
				font-weight: 600;
				font-size: 30rpx;
				color: #0F0F13;
				border-right: #343437 1rpx solid;
			}
			.li:nth-last-child(1) {
				border-right: none;
			}
		}
		.tdVue {
			width: 100%;
			height: 70rpx;
			border-bottom: #343437 1rpx solid;
			.li {
				width: 33.333333%;
				line-height: 70rpx;
				text-align: center;
				font-weight: 600;
				font-size: 24rpx;
				color: rgba(255,255,255,0.6);
				border-right: #343437 1rpx solid;
				border-left: #343437 1rpx solid;
			}
			.li:nth-child(2) {
				border-left: none;
			}
			.li:nth-child(3) {
				border-left: none;
			}
		}
	}

	.rightVue {
		width: 670rpx;

		.right {
			padding: 30rpx;
			background: url("../../static/kuang.png") no-repeat;
			background-size: 100% 100%;
			.text {
				color: #9F9FA1;
				line-height: 46rpx;
				padding-top: 20rpx;
			}
			.info {
				color: #45F882;
				line-height: 1;
				padding-top: 20rpx;
			}
		}
	}

	.content {
		padding: 40rpx;
		font-size: 33rpx;
		color: #FFFFFF;
	}
</style>
